<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
 <meta charset="utf-8">
<title>趣味编辑器</title>
<style type="text/css">
* {
font-family: "黑体";
}
h1 {
font-size: 24px;
text-align: center;
}
body {
margin: 0;
}

#center {
width: 320px;
margin: 0 auto;
}
.right {
text-align: right;
}
input{
width: 310px;
height: 35px;
}
textarea{
width: 310px;
height: 80px;
}
input,textarea{
 border: 1px solid #ccc;
 padding: 7px 0px;
 border-radius: 3px;
 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
 box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
textarea::focus, input:focus{
 border-color: #66afe9;
 outline: 0;
 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
 box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
 }	
#calc {
 width: 100%;
 height: 40px;
/* line-height: 40px;*/
 text-align: center;
 background-color: #eee;
 border: 5px;
 color: #666;
 display: block;
 font-size: 16px;
}
		
#calc:hover{
 color:white;
 background: #4caf50;
}
	
	
	
/*日历*/
#calendar{ 
background:#fff; 
color:#333; 
font-size:0.8em; 
} 
#tittle{ 
font-size:1.4em; 
padding:4px 0.55em; 
} 
#days th { 
font-weight:bold; 
text-align:center; 
padding:4px 0.55em; 
} 
#calendar td{ 
text-align:center; 
padding:4px 0.55em; 
} 
#today{ 
color:#F00; 
font-weight:bold; 
} 
	</style>
<script language="javascript">
	//文本替换
		function calc() {
			var source = new String();
			var select = new String();
			var replace = new String();
			source = document.getElementById("source").value;
			select = document.getElementById("select").value;
			replace = document.getElementById("replace").value;
			var regS = new RegExp(select, "g");
			document.getElementById("result").value = source.replace(regS, replace);
		}
	//文本保存

</script>
</head>
<body>

<!--替换开始-->	
	<div id="center">
		<table>
			<tr>
				<td colspan="2">
					<h1>文本替换</h1>
				</td>
			</tr>
			<tr>
				
				<td><textarea id="source" placeholder="请输入文本内容"></textarea></td>
			</tr>
			<tr>

				<td><input type="text" id="select" placeholder="请输入查找内容"></td>
			</tr>
			<tr>

				<td><input type="text" id="replace" placeholder="将它替换为..."></td>
			</tr>
			<tr>

				<td><textarea id="result" placeholder="输出结果显示"></textarea></td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="button" id="calc" value="全部替换" onclick="calc()">
				</td>
			</tr>
		</table>


<!--日历开始-->

<script type="text/javascript"> 
var calendar = { 
dayTable:null, //初始化TABLE 
year:null, //初始化年 
month:null, //初始化月份 

getFirstDay:function(year,month){ //获取每个月第一天再星期几 
var firstDay = new Date(year,month,1); 
return firstDay.getDay(); //getDay()方法来获取 
}, 
getMonthLen:function(year,month){ //获取当月总共有多少天 
var nextMonth = new Date(year,month+1,1); //获取下个月的第一天 
nextMonth.setHours(nextMonth.getHours() - 3); //由于获取的天是0时,所以减去3小时则可以得出该月的天数 
return nextMonth.getDate(); //返回当天日期 
}, 
createCalendar:function(form,date){ //创建日历方法 
calendar.year = date.getFullYear(); //获得当时的年份,并赋值到calendar属性year中,以便别的方法的调用 
calendar.month = date.getMonth(); //跟上面获取年份的目的一样 
form.getElementsByTagName('th')[1].innerHTML = calendar.year + '年 ' + (calendar.month + 1) + '月'; //插入年份和月

份 
calendar.clearCalendar(form); //清空TABLE 
var monthLen = calendar.getMonthLen(calendar.year,calendar.month); //获取月份长度 
var firstDay = calendar.getFirstDay(calendar.year,calendar.month); //获取月份首天为星期几 
for(var i = 1;i <= monthLen;i++){ //循环写入每天的值进入TABLE中 
calendar.dayTable[i+firstDay-1].innerHTML = i; //i为循环值,加上第一天的星期值刚可以对应TABLE位置,但由于数组从0开始

算,所以需要减去1 
if((i+firstDay-2) == new Date().getDate() && calendar.month == new Date().getMonth() && calendar.year == new Date

().getFullYear()){ //判断是否是当天 
calendar.dayTable[i+firstDay-1].id = 'today'; 
} 
} 
}, 
clearCalendar:function(form){ //清空TABLE方法 
this.dayTable = form.getElementsByTagName('td'); 
for(var i = 0;i < this.dayTable.length;i++){ 
this.dayTable[i].innerHTML = ' '; 
this.dayTable[i].id = ''; 
} 
}, 
init:function(form){ //主方法 
this.dayTable = form.getElementsByTagName('td'); 
this.createCalendar(form,new Date()); 
var preMon = form.getElementsByTagName('th')[0]; 
var nextMon = form.getElementsByTagName('th')[2]; 
preMon.onclick = function(){ //当点击左按钮时,减去一个月,并重绘TABLE 
calendar.createCalendar(form,new Date(calendar.year,calendar.month-1,1)); 
} 
nextMon.onclick = function(){ //当点击右按钮时,加上一个月,并重绘TABLE 
calendar.createCalendar(form,new Date(calendar.year,calendar.month+1,1)); 
} 
} 

} 
window.onload = function(){ 
var calendars = document.getElementById('calendar'); 

calendar.init(calendars); 
} 
</script> 


<table id="calendar" cellspacing="15"> 
<tr> 
<th style="cursor:pointer;cursor:hand;">＜</th> 
<th id="tittle" colspan="5"> </th> 
<th style="cursor:pointer;cursor:hand;">＞</th> 
</tr> 
<tr id="days"> 
<th>日</th> 
<th>一</th> 
<th>二</th> 
<th>三</th> 
<th>四</th> 
<th>五</th> 
<th>六</th> 
</tr> 
<tr> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
</table> 

</div>

</body> 
</html>
